//建议反馈页面
import React, { Component } from "react";
import "./advise.scss";
import { Input, Button, Toast } from "zarm";
const list = ["软件问题", "报修工单", "设备开关"];
export default class Advise extends Component {
  componentDidMount() {
    window.document.title = "建议反馈";
  }
  state = {
    select: 0,
    content: "",
  };
  onSelect = (select) => {
    this.setState({ select });
  };
  Submit = () => {
    const { content } = this.state;
    if (!content.length) {
      Toast.show({ stayTime: 1000, content: "请输入反馈内容" });
      return false;
    } else {
      Toast.show({ stayTime: 300, content: "提交成功" });
    }
    this.setState({ content: "" });
    setTimeout(() => {
      this.props.history.goBack();
    }, 300);
  };
  render() {
    const { select, content } = this.state;
    return (
      <div className="advise">
        <div className="header">建议反馈</div>
        <div className="content">
          <div className="title">
            <img src={require("../../img/反馈类型.png").default} alt="" />
            <span>反馈类型</span>
          </div>
          <div className="mold">
            {list.map((item, index) => (
              <div
                key={index}
                className={select === index ? "active" : ""}
                onClick={() => this.onSelect(index)}
              >
                {item}
              </div>
            ))}
          </div>
          <div className="select">
            {list.map((elem, index) => {
              return select === index ? (
                <div key={index}>
                  已选:<span>{elem}</span>
                </div>
              ) : (
                ""
              );
            })}
          </div>
          <div className="description">
            <div className="desc_title">
              <img src={require("../../img/描述.png").default} alt="" />
              <span>描述</span>
            </div>
            <Input
              type="text"
              placeholder="请输入反馈信息..."
              rows={10}
              value={content}
              onChange={(value) => {
                this.setState({ content: value.trim() });
              }}
            />
          </div>
        </div>
        <div className="submit">
          <Button block shape="round" theme="primary" onClick={this.Submit}>
            提交
          </Button>
        </div>
      </div>
    );
  }
}
